<template>
	<view class="page">
		<view class="upload-progress" v-if="uploading">
			<view class="progress-bar">
				<view class="progress-fill" :style="{ width: uploadProgress + '%' }"></view>
			</view>
			<text class="progress-text">上传中 {{ uploadProgress }}%</text>
		</view>
		<view class="preview-card" v-if="videoPath && !uploading">
			<video class="preview" :src="videoPath" :poster="''" :autoplay="false" :loop="true" :controls="true" object-fit="cover" />
			<view class="duration" v-if="duration">{{ Math.round(duration) }}s</view>
		</view>
		<view class="loading-section" v-if="uploading">
			<uni-icons type="spinner-cycle" size="60" color="#fff"></uni-icons>
			<text class="loading-text">视频上传中，请稍候...</text>
		</view>
	</view>
</template>

<script setup>
import { ref, onLoad } from 'vue'
import { uploadVideo } from '@/api/publish.js'

const videoPath = ref('')
const duration = ref(0)
const uploading = ref(false)
const uploadProgress = ref(0)
const videoUrl = ref('')

// 接收从拍摄页传入的视频路径
onLoad((query) => {
	if (query?.path) {
		videoPath.value = decodeURIComponent(query.path)
		duration.value = Number(query.duration) || 0
		// 自动开始上传
		startUpload()
	}
})

// 开始上传视频
async function startUpload() {
	if (!videoPath.value) {
		uni.showToast({ title: '缺少视频', icon: 'none' })
		return
	}
	
	uploading.value = true
	uploadProgress.value = 0
	
	try {
		const res = await uploadVideo(videoPath.value, (progress) => {
			// uni.uploadFile的progress回调返回 { progress, totalBytesSent, totalBytesExpectedToSend }
			uploadProgress.value = progress.progress || Math.round((progress.totalBytesSent / progress.totalBytesExpectedToSend) * 100) || 0
		})
		
		// 获取视频URL
		if (res.data) {
			// 如果data是字符串，尝试解析
			if (typeof res.data === 'string') {
				try {
					const parsed = JSON.parse(res.data)
					videoUrl.value = parsed.url || parsed.videoUrl || res.data
				} catch (e) {
					videoUrl.value = res.data
				}
			} else if (typeof res.data === 'object') {
				videoUrl.value = res.data.url || res.data.videoUrl || res.data
			}
		}
		
		// 上传成功后跳转到编辑页面
		if (videoUrl.value) {
			uni.redirectTo({
				url: `/pages/publish/edit?videoUrl=${encodeURIComponent(videoUrl.value)}&duration=${duration.value}`
			})
		} else {
			throw new Error('未获取到视频地址')
		}
	} catch (error) {
		console.error('上传失败:', error)
		uni.showToast({ 
			title: error.message || '上传失败，请重试', 
			icon: 'none',
			duration: 2000
		})
		uploading.value = false
		// 上传失败，返回拍摄页面
		setTimeout(() => {
			uni.navigateBack()
		}, 2000)
	}
}
</script>

<style lang="scss" scoped>
.page {
	min-height: 100vh;
	background: #0b0b0b;
	color: #fff;
	padding: 20rpx 24rpx 40rpx;
	display: flex;
	flex-direction: column;
}

.upload-progress {
	padding: 40rpx 0;
}

.progress-bar {
	width: 100%;
	height: 8rpx;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 4rpx;
	overflow: hidden;
	margin-bottom: 20rpx;
}

.progress-fill {
	height: 100%;
	background: linear-gradient(135deg, #ff2d55, #ff6a00);
	transition: width 0.3s;
}

.progress-text {
	display: block;
	text-align: center;
	font-size: 28rpx;
	color: #fff;
}

.preview-card {
	position: relative;
	border-radius: 16rpx;
	overflow: hidden;
	background: #000;
}

.preview {
	width: 100%;
	height: 420rpx;
	background: #000;
}

.duration {
	position: absolute;
	right: 12rpx;
	bottom: 12rpx;
	background: rgba(0, 0, 0, .5);
	padding: 6rpx 12rpx;
	border-radius: 24rpx;
	font-size: 22rpx;
}

.loading-section {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 30rpx;
}

.loading-text {
	font-size: 28rpx;
	color: #fff;
}
</style>


